<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>概述 | Awesome-笔记</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="icon" href="icons/favicon.ico">
    <meta name="description" content="">
    <meta name="author" content="热爱生活，喜欢睡觉">
    <meta name="about" content="这是一个专门用于记录笔记的静态资源网站">
    
    <link rel="preload" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css" as="style"><link rel="preload" href="/awesome-notebook/assets/js/app.5520c9b0.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/2.778bb4ad.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/1.50b457b8.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/33.3031be3e.js" as="script"><link rel="prefetch" href="/awesome-notebook/assets/js/10.325b9f09.js"><link rel="prefetch" href="/awesome-notebook/assets/js/11.c62b6b34.js"><link rel="prefetch" href="/awesome-notebook/assets/js/12.ecdb524b.js"><link rel="prefetch" href="/awesome-notebook/assets/js/13.3f3f6a36.js"><link rel="prefetch" href="/awesome-notebook/assets/js/14.eb7a3d07.js"><link rel="prefetch" href="/awesome-notebook/assets/js/15.114dfd5c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/16.85253907.js"><link rel="prefetch" href="/awesome-notebook/assets/js/17.c2838453.js"><link rel="prefetch" href="/awesome-notebook/assets/js/18.3256f17f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/19.d8afd0ae.js"><link rel="prefetch" href="/awesome-notebook/assets/js/20.10e47ab9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/21.33b300c9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/22.b7c97fbe.js"><link rel="prefetch" href="/awesome-notebook/assets/js/23.e9994ecc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/24.8cc3e1e8.js"><link rel="prefetch" href="/awesome-notebook/assets/js/25.dedb1585.js"><link rel="prefetch" href="/awesome-notebook/assets/js/26.9422829f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/27.9802cd87.js"><link rel="prefetch" href="/awesome-notebook/assets/js/28.d9f287bc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/29.dc9b14bd.js"><link rel="prefetch" href="/awesome-notebook/assets/js/3.af33e5d6.js"><link rel="prefetch" href="/awesome-notebook/assets/js/30.645d0efa.js"><link rel="prefetch" href="/awesome-notebook/assets/js/31.164808cf.js"><link rel="prefetch" href="/awesome-notebook/assets/js/32.59287e4c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/34.4ce6ff0d.js"><link rel="prefetch" href="/awesome-notebook/assets/js/35.d58eebcc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/4.45665f8a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/5.7098d77a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/6.0c0a0f39.js"><link rel="prefetch" href="/awesome-notebook/assets/js/7.6a854e57.js"><link rel="prefetch" href="/awesome-notebook/assets/js/vendors~docsearch.5e19b665.js">
    <link rel="stylesheet" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/awesome-notebook/" class="home-link router-link-active"><img src="/awesome-notebook/imgs/hero.png" alt="Awesome-笔记" class="logo"> <span class="site-name can-hide">Awesome-笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>概述</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#npm-镜像源配置" class="sidebar-link">npm 镜像源配置</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#下载依赖" class="sidebar-link">下载依赖</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#webpack-配置文件" class="sidebar-link">webpack 配置文件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#css-文件" class="sidebar-link">css 文件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#less-文件" class="sidebar-link">less 文件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#sass-和-scss-资源" class="sidebar-link">sass 和 scss 资源</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#图片资源" class="sidebar-link">图片资源</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#处理-js-资源" class="sidebar-link">处理 js 资源</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#eslint" class="sidebar-link">eslint</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#eslint-配置文件" class="sidebar-link">eslint 配置文件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#在-webpack-中使用-eslint" class="sidebar-link">在 webpack 中使用 eslint</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#babel" class="sidebar-link">babel</a></li></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#处理-html-资源" class="sidebar-link">处理 HTML 资源</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#下载依赖-2" class="sidebar-link">下载依赖</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#配置文件-3" class="sidebar-link">配置文件</a></li></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#搭建开发服务器" class="sidebar-link">搭建开发服务器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#下载开发服务器" class="sidebar-link">下载开发服务器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#配置文件-4" class="sidebar-link">配置文件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#运行指令" class="sidebar-link">运行指令</a></li></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#生产模式与开发模式" class="sidebar-link">生产模式与开发模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#生产模式-prod" class="sidebar-link">生产模式 prod</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#开发模式-dev" class="sidebar-link">开发模式 dev</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#文件运行" class="sidebar-link">文件运行</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#配置运行指令" class="sidebar-link">配置运行指令</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#生成-css-文件" class="sidebar-link">生成 css 文件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#html、css、js-压缩" class="sidebar-link">html、css、js 压缩</a></li></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#sourcemap-配置项" class="sidebar-link">sourceMap 配置项</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#开发模式-dev-2" class="sidebar-link">开发模式 dev</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#生产模式-prod-2" class="sidebar-link">生产模式 prod</a></li></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#热模块替换" class="sidebar-link">热模块替换</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#js-的热模块替换" class="sidebar-link">js 的热模块替换</a></li></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#oneof" class="sidebar-link">oneOf</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#include-和-exclude" class="sidebar-link">include 和 exclude</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#减少打包体积" class="sidebar-link">减少打包体积</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#tree-shaking" class="sidebar-link">Tree shaking</a></li></ul></li><li><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#babel-2" class="sidebar-link">Babel</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#下载插件-3" class="sidebar-link">下载插件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#配置文件-6" class="sidebar-link">配置文件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B7%A5%E7%A8%8B%E5%8C%96/webpack%E7%9B%B8%E5%85%B3/webpack%E4%BD%BF%E7%94%A8.html#图片压缩" class="sidebar-link">图片压缩</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h1> <p>静态模块打包工具
在内部从一个或多个入口点构建一个依赖图。然后将项目中需要的每一个模块组合成一个或多个 bundles，均为静态资源</p> <h2 id="npm-镜像源配置"><a href="#npm-镜像源配置" class="header-anchor">#</a> npm 镜像源配置</h2> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token comment">#遇到的问题：配置镜像源为淘宝： https://registry.npm.taobao.org 时，包下载速度十分慢</span>
<span class="token comment"># 通过浏览器进行访问发现该域名自动跳转到了https://registry.npmmirror.com，初步估计可能是挂了</span>
<span class="token comment"># 遂修改镜像源为后者</span>

<span class="token comment"># 查看当前使用的镜像源</span>
<span class="token function">npm</span> config get registry
<span class="token comment"># 修改镜像源</span>
<span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npmmirror.com


<span class="token comment"># 其他命令</span>
<span class="token comment"># 查看包的详细信息</span>
<span class="token function">npm</span> info <span class="token punctuation">[</span>包名称<span class="token punctuation">]</span>
</code></pre></div><div class="language- extra-class"><pre class="language-text"><code># 安装
webpack webpack-cli webpack-dev-server
</code></pre></div><h2 id="下载依赖"><a href="#下载依赖" class="header-anchor">#</a> 下载依赖</h2> <p>直接在 html 文件中使用 es6 语法的 js 文件。浏览器将会报错，需要使用 webpack 相关工具将 es6 语法转换为 es5</p> <p>进入项目根目录</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token comment">#输入下面命令生成package.json文件</span>
<span class="token function">npm</span> init <span class="token parameter variable">-y</span>
<span class="token comment"># 下载依赖,-D表示在开发环境下</span>
<span class="token function">npm</span> i webpack webpack-cli <span class="token parameter variable">-D</span>
<span class="token comment"># --save-dev  简写为 -D 表示安装在开发环境下</span>
<span class="token comment"># --save      简写为-S  表示安装下生产环境下</span>
<span class="token comment"># 使用npx命令进行打包，--mode=development表示开发模式，会有很多注释，--mode=production表示生产模式，一般不会有注释</span>
<span class="token function">npm</span> webpack ./src/main.js <span class="token parameter variable">--mode</span><span class="token operator">=</span>development
</code></pre></div><h2 id="webpack-配置文件"><a href="#webpack-配置文件" class="header-anchor">#</a> webpack 配置文件</h2> <p>项目根目录下的 webpack.config.js 文件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//nodejs模块，用于处理路径问题</span>
<span class="token comment">//ReferenceError: HtmlWebpackPlugin is not defined</span>
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;html-webpack-plugin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//入口文件</span>
  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">&quot;./src/main.js&quot;</span><span class="token punctuation">,</span>
  <span class="token comment">//输出</span>
  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//文件输出路径,__dirname表示当前项目的绝对路径</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;./dist&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token comment">//入口文件打包输出文件名</span>
    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">&quot;static/js/main.js&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">//自动清空上次打包的内容，配置devServer之后没有任何输出，写不写clean都无所谓</span>
    <span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//插件</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;public/index.html&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">//加载器Loader</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token comment">//use数组中loader的loader使用顺序是从后向前，从下到上</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token comment">// loader:&quot;&quot;  loader配置项和use配置项冲突，前者只能配置一个loader</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;less-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sass-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token comment">//错误：此处将？符号错写为！，导致generator中的filename配置一直不生效</span>
        <span class="token comment">//需要将整个dist目录删除并重新进行打包</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;asset&quot;</span><span class="token punctuation">,</span>
        <span class="token comment">//配置用正则匹配到的该类文件的输出路径，hash代表文件名，:10代表文件名长度，ext代表文件扩展名</span>
        <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token comment">//打包后，图片文件输出路径</span>
          <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">&quot;static/images/[hash:10][ext]&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//开发服务器</span>
  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&quot;localhost&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">&quot;8000&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//模式</span>
  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">&quot;development&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>当执行<code>npx webpack [配置]</code> 命令进行打包时，如果没有配置引擎将会在根目录下找该配置文件，并按照里面的配置进行打包，如果有配置，配置项的优先级高于该配置文件</p> <h1 id="webpack-处理样式资源"><a href="#webpack-处理样式资源" class="header-anchor">#</a> webpack 处理样式资源</h1> <p>css、less、scss、sass、等样式资源需要借助 loader</p> <h2 id="css-文件"><a href="#css-文件" class="header-anchor">#</a> css 文件</h2> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token comment">#处理css资源</span>
<span class="token comment"># css-loader负责将css文件编译为webpack能识别的模块</span>
<span class="token comment"># style-loader动态创建一个style标签，里面放置上面打包得到的css模块内容，此时样式就会在页面生效</span>
<span class="token function">npm</span> <span class="token parameter variable">-i</span> css-loader style-loader <span class="token parameter variable">-D</span>
</code></pre></div><p>在 webpack.config.js 中配置 Loader</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token comment">//use数组中loader的loader使用顺序是从后向前，从下到上</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;less-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="less-文件"><a href="#less-文件" class="header-anchor">#</a> less 文件</h2> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token comment"># 处理less资源</span>
<span class="token comment"># less-loader负责将less文件编译为css文件，然后再使用css-loader和style-loader重复上述css处理过程</span>
<span class="token function">npm</span> <span class="token parameter variable">-i</span> less-loader <span class="token parameter variable">-D</span>
</code></pre></div><p>在 webpack.config.js 中配置 Loader</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;less-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="sass-和-scss-资源"><a href="#sass-和-scss-资源" class="header-anchor">#</a> sass 和 scss 资源</h2> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token comment"># 处理sass资源</span>
<span class="token comment"># sass-loader负责将sass文件编译为css文件，然后再使用</span>
<span class="token comment"># sass：sass-loader依赖sass进行编译</span>
<span class="token function">npm</span> <span class="token parameter variable">-i</span> sass sass-loader <span class="token parameter variable">-D</span>
</code></pre></div><p>在 webpack.config.js 中配置 Loader</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sass-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="图片资源"><a href="#图片资源" class="header-anchor">#</a> 图片资源</h2> <p>webpack4 处理图片资源使用 file-loader 和 url-loader,webpack5 将两个 loader 内置，简单配置即可</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe!g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;asset&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="处理-js-资源"><a href="#处理-js-资源" class="header-anchor">#</a> 处理 js 资源</h2> <ul><li>webpack 相只能够编译处理 js 中 Es 模块化的语法，不能编译其他语法，导致 js 不能在 IE 浏览器中运行，使用 babel 进行 js 兼容性处理</li> <li>实际开发中对代码格式要求比较严格，需要使用专业工具对代码格式进行检查，使用 eslint 来处理 js 代码格式</li></ul> <h3 id="eslint"><a href="#eslint" class="header-anchor">#</a> eslint</h3> <p>检测 js 和 jsx 语法的工具，可配置各项功能</p> <h3 id="eslint-配置文件"><a href="#eslint-配置文件" class="header-anchor">#</a> eslint 配置文件</h3> <p>配置文件由很多种写法：</p> <ul><li><code>.eslintrc.*</code>：新建文件，位于项目根目录
<ul><li><code>.eslintrc</code></li> <li><code>.eslintrc.js</code></li> <li><code>.eslintrc.json</code></li> <li>区别在于配置格式不一样</li></ul></li> <li><code>package.json</code> 中 <code>eslintConfig</code>：不需要创建文件，在原有文件基础上写</li></ul> <p>ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 解析选项</span>
  <span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token comment">// ES 语法版本</span>
    <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">,</span> <span class="token comment">// ES 模块化</span>
    <span class="token literal-property property">ecmaFeatures</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// ES 其他特性</span>
      <span class="token literal-property property">jsx</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 如果是 React 项目，就需要开启 jsx 语法</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 具体检查规则</span>
  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">semi</span><span class="token operator">:</span> <span class="token string">&quot;error&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 禁止使用分号</span>
    <span class="token string-property property">&quot;array-callback-return&quot;</span><span class="token operator">:</span> <span class="token string">&quot;warn&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 强制数组方法的回调函数中有 return 语句，否则警告</span>
    <span class="token string-property property">&quot;default-case&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">&quot;warn&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 要求 switch 语句中有 default 分支，否则警告</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">commentPattern</span><span class="token operator">:</span> <span class="token string">&quot;^no default$&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 允许在最后注释 no default, 就不会有警告了</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">&quot;warn&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 强制使用 === 和 !==，否则警告</span>
      <span class="token string">&quot;smart&quot;</span><span class="token punctuation">,</span> <span class="token comment">//  除了少数情况下不会有警告</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 继承其他规则,例如在react项目中进行下面配置来使用react官方配置</span>
  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;react-app&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。</p> <p>现有以下较为有名的规则：</p> <ul><li><a href="https://eslint.bootcss.com/docs/rules/" target="_blank" rel="noopener noreferrer">Eslint 官方的规则<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：<code>eslint:recommended</code></li> <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint" target="_blank" rel="noopener noreferrer">Vue Cli 官方的规则<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：<code>plugin:vue/essential</code></li> <li><a href="https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app" target="_blank" rel="noopener noreferrer">React Cli 官方的规则<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：<code>react-app</code></li></ul> <h3 id="在-webpack-中使用-eslint"><a href="#在-webpack-中使用-eslint" class="header-anchor">#</a> 在 webpack 中使用 eslint</h3> <p>下载相关包</p> <div class="language- extra-class"><pre class="language-text"><code>npm i eslint-webpack-plugin eslint -D
</code></pre></div><p>定义 eslint 配置文件，此处配置.eslintrc.js</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//继承eslint规则</span>
  <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">node</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">brower</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//启动浏览器中全局变量</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
    <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;no-var&quot;</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">//不使用var定义变量</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="babel"><a href="#babel" class="header-anchor">#</a> babel</h3> <p>js 编译器，将 es6 语法编写的代码转化为向后兼容的 js 语法，以便于能运行在当前和旧版本的浏览器中</p> <h4 id="配置文件"><a href="#配置文件" class="header-anchor">#</a> 配置文件</h4> <ul><li><code>babel.config.*</code>：新建文件，位于项目根目录
<ul><li><code>babel.config.js</code></li> <li><code>babel.config.json</code></li></ul></li> <li><code>.babelrc.*</code>：新建文件，位于项目根目录
<ul><li><code>.babelrc</code></li> <li><code>.babelrc.js</code></li> <li><code>.babelrc.json</code></li></ul></li> <li><code>package.json</code> 中 <code>babel</code>：不需要创建文件，在原有文件基础上写</li></ul> <p>Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 预设:就是一组babel插件用于扩展babel、功能</span>
  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">/*

简单理解：就是一组 Babel 插件, 扩展 Babel 功能

- `@babel/preset-env`: 一个智能预设，允许您使用最新的 JavaScript。
- `@babel/preset-react`：一个用来编译 React jsx 语法的预设
- `@babel/preset-typescript`：一个用来编译 TypeScript 语法的预设

*/</span>
</code></pre></div><h4 id="下载相关包"><a href="#下载相关包" class="header-anchor">#</a> 下载相关包</h4> <div class="language- extra-class"><pre class="language-text"><code>npm i babel-loader @babel/core @babel/preset-env -D
</code></pre></div><h4 id="配置文件-2"><a href="#配置文件-2" class="header-anchor">#</a> 配置文件</h4> <p>定义 babel 配置文件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//在webpack.config.js中进行配置</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//在module的rules中进行配置</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">//排除node_modules中的js文件，即不处理这些文件</span>
        <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">&quot;babel-loader&quot;</span><span class="token punctuation">,</span>
        <span class="token comment">//如果在此处不配置预设presets，就需要在babel.config.js中进行配置</span>
        <span class="token comment">// options:{</span>
        <span class="token comment">//   presets:[&quot;@babel/preset-env&quot;]</span>
        <span class="token comment">// }</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>在 babel.config.js 文件中配置预设，方便进行修改</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//使用智能预设</span>
  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;@babel/preset-env&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="处理-html-资源"><a href="#处理-html-资源" class="header-anchor">#</a> 处理 HTML 资源</h2> <h3 id="下载依赖-2"><a href="#下载依赖-2" class="header-anchor">#</a> 下载依赖</h3> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> i html-webpack-plugin <span class="token parameter variable">-D</span>

</code></pre></div><h3 id="配置文件-3"><a href="#配置文件-3" class="header-anchor">#</a> 配置文件</h3> <p>使用插件之前需要在 webpack.config.js 中进行引入<code>const HtmlWebpackPlugin = require('html-webpack-plugin')</code>，否则会报错：ReferenceError: HtmlWebpackPlugin is not defined</p> <p>该插件将会默认在 dist 目录下生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">//template用于设置新生成的html内容保留原index.html文件内容，并引入main.js等配置内容</span>
    <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;public/index.html&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="搭建开发服务器"><a href="#搭建开发服务器" class="header-anchor">#</a> 搭建开发服务器</h2> <p>每次更新完文件都需要手动输入指令才能编译代码，我们希望能够自动化完成该步骤，webpack-dev-server 可用于快速开发应用程序</p> <h3 id="下载开发服务器"><a href="#下载开发服务器" class="header-anchor">#</a> 下载开发服务器</h3> <div class="language-shell extra-class"><pre class="language-shell"><code>
<span class="token function">npm</span> i webpack-dev-server <span class="token parameter variable">-D</span>

</code></pre></div><h3 id="配置文件-4"><a href="#配置文件-4" class="header-anchor">#</a> 配置文件</h3> <p>webpack.config.js 文件</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 开发服务器</span>
  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&quot;localhost&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器域名</span>
    <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">&quot;3000&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器端口号</span>
    <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开浏览器</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="运行指令"><a href="#运行指令" class="header-anchor">#</a> 运行指令</h3> <p>使用 dev server 之后，所有代码都会在内存中变异打包而不会输出到 dist 目录下，开发中我们只关心代码是否能运行、是否有效果、而不关心代码被编译为什么样</p> <div class="language-shell extra-class"><pre class="language-shell"><code>npx webpck serve
</code></pre></div><h2 id="生产模式与开发模式"><a href="#生产模式与开发模式" class="header-anchor">#</a> 生产模式与开发模式</h2> <p>生产模式：代码开发完成后，接着需要进行部署上线，这个过程需要对代码进行优化：运行性能和打包速度</p> <p>使用两个配置文件存放不同配置</p> <div class="language- extra-class"><pre class="language-text"><code>//根目录
 ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
</code></pre></div><p>主要将 webpack.config.js 中的相对路径进行更改</p> <h3 id="生产模式-prod"><a href="#生产模式-prod" class="header-anchor">#</a> 生产模式 prod</h3> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//更改相对路径</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;../dist&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//生产模式下不需要输出文件</span>
  <span class="token comment">// devServer: {</span>
  <span class="token comment">//   host: &quot;localhost&quot;, // 启动服务器域名</span>
  <span class="token comment">//   port: &quot;3000&quot;, // 启动服务器端口号</span>
  <span class="token comment">//   open: true, // 是否自动打开浏览器</span>
  <span class="token comment">// },</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="开发模式-dev"><a href="#开发模式-dev" class="header-anchor">#</a> 开发模式 dev</h3> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//开发模式没有输出，只需要使用devServer查看代码执行结果即可</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="文件运行"><a href="#文件运行" class="header-anchor">#</a> 文件运行</h3> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token comment"># 运行生产模式指令</span>
npx webpack <span class="token parameter variable">--config</span> ./config/webpack.prod.js
</code></pre></div><p>使用这种指令运行指定模式的指令过于繁琐，下面在 package.json 中配置相关运行指令</p> <h3 id="配置运行指令"><a href="#配置运行指令" class="header-anchor">#</a> 配置运行指令</h3> <div class="language-json extra-class"><pre class="language-json"><code><span class="token comment">// package.json</span>
<span class="token punctuation">{</span>
  <span class="token comment">// 其他省略</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;start&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npm run dev&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npx webpack serve --config ./config/webpack.dev.js&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npx webpack --config ./config/webpack.prod.js&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>使用下面命令打包并启动 serve</p> <p>开发模式
npm start 或 npm run dev</p> <p>生产模式
npm run build</p> <h3 id="生成-css-文件"><a href="#生成-css-文件" class="header-anchor">#</a> 生成 css 文件</h3> <p>闪屏现象：使用 style-loader，css 文件将会被打包到 js 文件中，当 js 文件加载时，创阿金一个 style 标签生成样式，当网速较慢时，浏览器会先渲染 html 生成框架，然后解析 js 文件，再生成 style 标签生样式，这就对于用户来说不是很友好</p> <p>应该使用单独的 css 文件通过 link 标签加载样式</p> <h4 id="下载插件"><a href="#下载插件" class="header-anchor">#</a> 下载插件,</h4> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> i mini-css-extract-plugin <span class="token parameter variable">-D</span>
</code></pre></div><h4 id="配置"><a href="#配置" class="header-anchor">#</a> 配置</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//webpack.dev.js</span>
<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;mini-css-extract-plugin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">&quot;static/css/main.css&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token comment">//使用插件中的loader替换掉style-loader</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>miniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="html、css、js-压缩"><a href="#html、css、js-压缩" class="header-anchor">#</a> html、css、js 压缩</h3> <p>在生产环境下，默认开启 html 和 js 压缩，css 压缩只需要配置一个插件即可</p> <h4 id="下载插件-2"><a href="#下载插件-2" class="header-anchor">#</a> 下载插件</h4> <div class="language-shell extra-class"><pre class="language-shell"><code>
<span class="token function">npm</span> <span class="token function">install</span> css-minimizer-webpack-plugin --save-dev

</code></pre></div><h4 id="配置文件-5"><a href="#配置文件-5" class="header-anchor">#</a> 配置文件</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//常配合该插件两者一起使用</span>
<span class="token comment">//webpack.prod.js</span>
<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;mini-css-extract-plugin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> CssMinimizerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;css-minimizer-webpack-plugin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">new</span> <span class="token class-name">CssMinimizerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">&quot;static/css/main.css&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token comment">//使用插件中的loader替换掉style-loader</span>
        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>miniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="webpack-高级"><a href="#webpack-高级" class="header-anchor">#</a> webpack 高级</h1> <p>进行 webpack 优化，使代码编译运行时性能更好</p> <h2 id="sourcemap-配置项"><a href="#sourcemap-配置项" class="header-anchor">#</a> sourceMap 配置项</h2> <p>经过 webpack 打包后，css、js 合并为一个文件，并且有很多除了业务代码外其他多余的代码，此时如果业务代码提示出错，错误位置我们难以找到，</p> <p>Devtool 配置项：控制是否生成，以及如何生成 source map。</p> <h3 id="开发模式-dev-2"><a href="#开发模式-dev-2" class="header-anchor">#</a> 开发模式 dev</h3> <blockquote><p>cheap-module-source-map:只生成报错位置的行索引，编译速度较快</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//webpack.dev.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 其他省略</span>
  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">&quot;development&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">devtool</span><span class="token operator">:</span> <span class="token string">&quot;cheap-module-source-map&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="生产模式-prod-2"><a href="#生产模式-prod-2" class="header-anchor">#</a> 生产模式 prod</h3> <blockquote><p>source-map:同时生成报错位置的行索引和列索引，编译速度较慢</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//webpack.prod.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 其他省略</span>
  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">&quot;production&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">devtool</span><span class="token operator">:</span> <span class="token string">&quot;source-map&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="热模块替换"><a href="#热模块替换" class="header-anchor">#</a> 热模块替换</h2> <p>开发时我们有时仅仅需要更改某个文件中的部分代码，此时如果还对整个项目文件进行重新打包就得不偿失了，在 devserver 中配置 hot：true 表示开启热模块替换功能，</p> <ul><li>一个注意点：使用 derserver 后，某个文件更新后实际上是 webpack 又对全体文件进行了一次打包（可以观察到网页自动刷新），配置 hot:true 后则不会出现该种情况</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 其他省略</span>
  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&quot;localhost&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器域名</span>
    <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">&quot;3000&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器端口号</span>
    <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开浏览器</span>
    <span class="token literal-property property">hot</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启HMR功能（只能用于开发环境，生产环境不需要了）</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="js-的热模块替换"><a href="#js-的热模块替换" class="header-anchor">#</a> js 的热模块替换</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//项目入口文件main.js</span>
<span class="token keyword">import</span> plus <span class="token keyword">from</span> <span class="token string">&quot;./js/count&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> replace_space <span class="token keyword">from</span> <span class="token string">&quot;./js/tools&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//该文件为webpack打包入口文件，需要将待打包的文件进行引入才能打包成功</span>
<span class="token keyword">import</span> <span class="token string">&quot;./css/index.css&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;./css/index.less&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;./sass/index.sass&quot;</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">plus</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">replace_space</span><span class="token punctuation">(</span><span class="token string">&quot;    ssss  &quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//使用该方式检测js文件的改变并进行热模块替换会很麻烦，实际开发中都会使用vue-loader或react-hot-loader来解决该问题</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>module<span class="token punctuation">.</span>hot<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//accept函数中的回调函数，是当路径中的文件发生改变时，自动调用</span>
  module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token string">&quot;./js/count&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">count</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;123&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token string">&quot;./js/tools&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">tools</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;123&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="oneof"><a href="#oneof" class="header-anchor">#</a> oneOf</h2> <p>打包时，每个文件都会将所有 loader 过一遍：使用其中 test 的正则进行匹配后，最终确定使用哪些 loader，但实际上当找到一个 loader 后往往就不需要继续向下找了，因此使用 OneOf 把所有 Loader 配置对象放在一个数组中</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//webpack.dev.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token comment">//打包时，每个文件只能被一个loader配置处理</span>
        <span class="token literal-property property">oneOf</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token comment">//原本所有loader配置对象{}直接放在rules数组中，现在使用oneOf包裹，放在其数组中</span>
          <span class="token punctuation">{</span>
            <span class="token comment">// 用来匹配 .css 结尾的文件</span>
            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
            <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;less-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sass-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;style-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;stylus-loader&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;asset&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">&quot;static/imgs/[hash:8][ext][query]&quot;</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;asset/resource&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">&quot;static/media/[hash:8][ext][query]&quot;</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
            <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">&quot;babel-loader&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="include-和-exclude"><a href="#include-和-exclude" class="header-anchor">#</a> include 和 exclude</h2> <p>打包时我们往往不需要处理 node_modules 中的 js 文件，此时，进行如下配置即可</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//webpack.dev.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules文件不编译，其他文件都处理</span>
        <span class="token comment">//两个配置只能写一个，否则会报错</span>
        <span class="token comment">//include:path.resolve(__dirname,&quot;../src&quot;)   只处理src下的文件，其他文件不处理</span>
        <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">&quot;babel-loader&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="减少打包体积"><a href="#减少打包体积" class="header-anchor">#</a> 减少打包体积</h2> <h3 id="tree-shaking"><a href="#tree-shaking" class="header-anchor">#</a> Tree shaking</h3> <p>我们定义的一些工具函数库或第三方工具函数库、组件库，默认打包时会引入整个库，但实际上我们只用到了其中一部分内容，因此只引入我们需要的部分有利于减小打包体积</p> <p>webpack 已经默认开启了此功能，无需进行相关配置</p> <h2 id="babel-2"><a href="#babel-2" class="header-anchor">#</a> Babel</h2> <p>babel 为编译的每个文件都插入了辅助代码，使打包体积过大，将这些辅助代码作为一个独立模块，来避免重复引入
引入 Babel runtime 作为一个独立模块，来避免重复引入。</p> <h3 id="下载插件-3"><a href="#下载插件-3" class="header-anchor">#</a> 下载插件</h3> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> i @babel/plugin-transform-runtime <span class="token parameter variable">-D</span>
</code></pre></div><h3 id="配置文件-6"><a href="#配置文件-6" class="header-anchor">#</a> 配置文件</h3> <p>下面的配置禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token comment">// 'transform-runtime' 插件告诉 Babel</span>
  <span class="token comment">// 要引用 runtime 来代替注入。</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.m?js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
    <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">&quot;babel-loader&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;@babel/plugin-transform-runtime&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="图片压缩"><a href="#图片压缩" class="header-anchor">#</a> 图片压缩</h3> <h4 id="下载插件-4"><a href="#下载插件-4" class="header-anchor">#</a> 下载插件</h4> <div class="language-shell extra-class"><pre class="language-shell"><code>
<span class="token function">npm</span> i image-minimizer-webpack-plugin imagemin <span class="token parameter variable">-D</span>
</code></pre></div><h4 id="配置-2"><a href="#配置-2" class="header-anchor">#</a> 配置</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//webpack.dev.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">optimization</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">minimizer</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token comment">//压缩css文件</span>
      <span class="token keyword">new</span> <span class="token class-name">CssMinimizerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token comment">// 压缩图片</span>
      <span class="token keyword">new</span> <span class="token class-name">ImageMinimizerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">minimizer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">implementation</span><span class="token operator">:</span> ImageMinimizerPlugin<span class="token punctuation">.</span>imageminGenerate<span class="token punctuation">,</span>
          <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">[</span><span class="token string">&quot;gifsicle&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">interlaced</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">[</span><span class="token string">&quot;jpegtran&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">progressive</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">[</span><span class="token string">&quot;optipng&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">optimizationLevel</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">[</span>
                <span class="token string">&quot;svgo&quot;</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token string">&quot;preset-default&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;prefixIds&quot;</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;sortAttrs&quot;</span><span class="token punctuation">,</span>
                      <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                        <span class="token literal-property property">xmlnsOrder</span><span class="token operator">:</span> <span class="token string">&quot;alphabetical&quot;</span><span class="token punctuation">,</span>
                      <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  <span class="token punctuation">]</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="打包时报错"><a href="#打包时报错" class="header-anchor">#</a> 打包时报错</h4> <div class="language- extra-class"><pre class="language-text"><code>Error: Error with 'src\images\1.jpeg': '&quot;C:\Users\86176\Desktop\webpack\webpack_code\node_modules\jpegtran-bin\vendor\jpegtran.exe&quot;'
Error with 'src\images\3.gif': spawn C:\Users\86176\Desktop\webpack\webpack_code\node_modules\optipng-bin\vendor\optipng.exe ENOENT
</code></pre></div><p>我们需要安装两个文件到 node_modules 中才能解决, 文件可以从课件中找到：</p> <ul><li>jpegtran.exe</li></ul> <p>需要复制到 <code>node_modules\jpegtran-bin\vendor</code> 下面</p> <blockquote><p><a href="http://jpegclub.org/jpegtran/" target="_blank" rel="noopener noreferrer">jpegtran 官网地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <ul><li>optipng.exe</li></ul> <p>需要复制到 <code>node_modules\optipng-bin\vendor</code> 下面</p> <blockquote><p><a href="http://optipng.sourceforge.net/" target="_blank" rel="noopener noreferrer">OptiPNG 官网地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/awesome-notebook/assets/js/app.5520c9b0.js" defer></script><script src="/awesome-notebook/assets/js/2.778bb4ad.js" defer></script><script src="/awesome-notebook/assets/js/1.50b457b8.js" defer></script><script src="/awesome-notebook/assets/js/33.3031be3e.js" defer></script>
  </body>
</html>
